<template>
	<view class="container" style="overflow: scroll;margin-bottom: 100rpx;">
		<view class="tui-list-view-top">
			<tui-list-cell :arrow="true" class="tui-list" :hover="false">
				<view class="tui-list-cell-name">物流方式</view>
				<view class="tui-right" @tap="openActionSheet(0)">{{typename}}</view>
			</tui-list-cell>
		</view>
		
		<tui-list-view title="用户填写字段" class="tui-list-view-center">
			<bolck v-for="(item, index) in list" :key="index">
				<tui-list-cell :arrow="false" class="tui-list" :hover="false"  v-if="item.extracting == 0" >
					<view class="tui-list-cell-name">{{item.name}}</view>
					<view class="tui-right">
						<text v-if="item.type == 'must'">必填</text>
						<text v-else>选填</text>
					</view>
				</tui-list-cell>
			</bolck>
		</tui-list-view>
		
		<tui-list-view>
			<tui-list-cell :arrow="false" :hover="false" class="tui-list tui-list-add" v-for="(item, key) in spare" :key="key">
				<tui-icon name="offline-fill" size="24" @tap="del(key)" color="#ff0000" v-if="item.extracting == 0"></tui-icon>
				<view class="tui-list-cell-name" v-if="item.extracting == 0">
					<input placeholder-class="phcolor" class="tui-input" name="name" maxlength="10" v-model="item.name" placeholder="请输入字段名称" type="text" />
				</view>
				<view class="tui-right" @tap="openActionSheet(1,key)" v-if="item.extracting == 0">
					<text v-if="item.type == 'must'">必填</text>
					<text v-else>选填</text>
				</view>
			</tui-list-cell>
		</tui-list-view>
		
		
		<view class="footMar">
			<tui-list-cell :arrow="false" class="tui-list" :hover="false" @tap="add">
				<tui-icon name="add-fill" size="20" color="#0A8FE2" ></tui-icon>
				<view class="tui-list-cell-name">自增自定义填写项</view>
			</tui-list-cell>
		</view>
		<!--内容部分-->
		
		<!-- <tui-list-view title="商户自提点填写" class="tui-list-view-center" v-if="shipping_type == 1">
			<bolck v-for="(item, index) in list" :key="index">
				<tui-list-cell :arrow="false" class="tui-list" :hover="false"  v-if="item.extracting == 1">
					<view class="tui-list-cell-name tui-list-cell-name-extracting">{{item.name}}</view>
					<input placeholder-class="phcolor" class="tui-input" :name="item.key" v-model="item.val"  :placeholder="'请输入'+item.name" type="text" />
					<!-- <view class="tui-right">
						<text v-if="item.type == 'must'">必填</text>
						<text v-else>选填</text>
					</view> -->
				<!--</tui-list-cell>
			</bolck>
		</tui-list-view> -->
		
		<view class="tui-list-view-center" v-if="shipping_type == 1">
			<view class="top_ztd">
				<view style="float: left;">商户自提点填写</view>
				<button class="btn-primary bottom_ztd" hover-class="btn-hover" formType="submit" type="primary" @tap="details('./selfpickupsite_add')">添加自提点</button>
			</view>
			<view class="tuiTips" v-if="goodsDetails.length == 0" >
				<tui-tips :fixed="false" imgUrl="/static/toast/img_nodata.png">暂时还没有内容</tui-tips>
			</view>
			<bolck v-else v-for="(item, index) in goodsDetails" :key="index">
				<view class="list_networkList">
					<view class="list_left" @click="check(item.network_id)">
						<checkbox :checked='element.indexOf(item.network_id) > -1?true:false'></checkbox>
					</view>
					<view class="list_details">
						<view class="list_tops">
							<view class="name_networkList" style="width: 500rpx;">{{item.title}}</view>
						</view>
						<view class="list_bottom">
							<view class="address_networkList" style="width: 500rpx;">{{item.address}}</view>
						</view>
						<view class="list_bottom">
							<view class="title_networkList">负责人：</view>
							<view class="address_networkList">{{item.name}} {{item.phone}}</view>
						</view>
						<view class="list_bottom">
							<view class="title_networkList" style="width: 155rpx;">自提时间：</view>
							<view class="address_networkList" style="width: 300rpx;">{{item.open_date}}</view>
						</view>
					</view>
					<view class="list_right" @click="details('./selfpickupsite_add?id='+item.network_id+'&title='+item.title+'&name='+item.name+'&phone='+item.phone+'&address='+item.address+'&open_date='+item.open_date+'&state='+ element.indexOf(item.network_id))">
						<view class="menuImgPadding">
							<image src="../../static/my/setting.png" class="menuImg"></image>
						</view>
					</view>
				</view>
			</bolck>
		</view>
		
		
		<tui-actionsheet :show="showActionSheet" :tips="tips" :item-list="item" :mask-closable="maskClosable" :color="color" :size="size" :is-cancel="isCancel" @click="itemClick" @cancel="closeActionSheet"></tui-actionsheet>
		
		<view class="tui-btn-box">
			<button class="btn-primary" hover-class="btn-hover" formType="submit" type="primary" @tap="detail('./my',1)">保存</button>
		</view>
		<!--toast提示-->
		<tui-toast ref="toast"></tui-toast>
		
		<!-- <tui-modal :show="modalBack" @click="confirmBack" @cancel="hideBack" title="确认要退出当前页面吗？" content="退出后编辑内容不会保存"></tui-modal> -->
		<!--toast提示-->
		
	</view>
</template>

<script>
	import tuiListView from "@/components/list-view/list-view"
	import tuiListCell from "@/components/list-cell/list-cell"
	import tuiIcon from "@/components/icon/icon"
	import tuiTag from "@/components/tag/tag"
	import tuiActionsheet from "@/components/actionsheet/actionsheet"
	import tuiToast from "@/components/extend/toast/toast"
	import tuiTips from "@/components/extend/tips/tips"
	
	export default {
		components: {
			tuiListView,
			tuiListCell,
			tuiIcon,
			tuiTag,
			tuiActionsheet,
			tuiToast,
			tuiTips
		},
		data() {
			return {
				showActionSheet: false,
				maskClosable: true,
				tips: "",
				typename: '',
				shipping_type: 2,
				item:[],
				spareIndex: '',
				spare: [
					// {name : '',status: 1},
				],
				// extracting 原来用来区分自提点的
				receipt:[
					[
						{key: 'mobile','name': '手机号',type: 'must',val:'', field: 1,extracting:0}
					],
					[
						// {key: 'shipping_network_title','name': '名称',type: 'must',val:'',field: 1,extracting:1},
						// {key: 'shipping_network_address','name': '地址',type: 'must',val:'',field: 1,extracting:1},
						// {key: 'shipping_network_name','name': '联系人',type: 'must',val:'',field: 1,extracting:1},
						// {key: 'shipping_network_phone','name': '电话',type: 'must',val:'',field: 1,extracting:1},
						// {key: 'shipping_network_period','name': '自提时间',type: 'must',val:'',field: 1,extracting:1},
						{key: 'mobile','name': '手机号',type: 'must',val:'',field: 1, extracting:0},
						
					],	
					[
						{key: 'name',name: '收件人',type: 'must',val:'',field: 1,extracting:0},
						{key: 'mobile',name: '手机号',type: 'must',val:'',field: 1,extracting:0},
						{key: 'address',name: '收货地址',type: 'must',val:'',field: 1,extracting:0}
					]
				],
				itemList: [
					[
						{
							text: "没有快递",
							color: "#1a1a1a"
						},
						{
							text: "用户自提",
							color: "#1a1a1a"
						},
						{
							text: "快递发货",
							color: "#1a1a1a"
						}
					],[
						{
							text: "必填",
							color: "#1a1a1a",
							type: 'must',
						},{
							text: "选填",
							color: "#1a1a1a",
							type: 'not_must',
						}
					]
				],
				list: [],
				color: "#9a9a9a",
				size: 26,
				isCancel: true,
				type: 0,
				modalBack: false,
				
				goodsDetails: [],
				actions: [
					{
						name: '删除',
						color: '#fff',
						fontsize: 30, //单位rpx
						width: 70, //单位px
						background: '#FD3B31'
					},
					{
						name: '修改',
						color: '#fff',
						fontsize: 30,
						width: 70,
						background: '#5677fc'
					}
				],
				element: [],
			}
		},
		onLoad: function(option) {
			console.log(this.shipping_type);
			console.log(option.shipping_param);
			if(option.shipping_param !='""'){
				let param = JSON.parse(option.shipping_param);
				this.shipping_type = param.shipping_type
				// if(getApp().globalData.shipping_type){
				// 	this.shipping_type = getApp().globalData.shipping_type;
				// }else{
				// 	this.shipping_type = param.shipping_type;
				// }
				console.log('这是什么的this.shipping_type' ,this.shipping_type)
				this.spare = param.spare;
				if(this.shipping_type == 1){
					// this.list = param.shipping_network;
					this.list = param.list;
				}
				console.log('这是list', param)
			}
			this.typename = this.itemList[this.type][this.shipping_type]['text'];
			if(this.shipping_type != 1){
				this.list = this.receipt[this.shipping_type];
			}
			this.loadDate();
			this.element = getApp().globalData.goodsDetails;
			console.log(this.element);
		},
		onShow: function() {
			this.loadDate();
			this.element = getApp().globalData.goodsDetails;
		},
		methods: {
			check: function(network_id){
				let that = this;
				console.log(network_id);
				console.log(that.element);
				console.log(that.element.indexOf(network_id));
				if(that.element.indexOf(network_id) > -1){
					that.element.splice(that.element.indexOf(network_id),1);
					getApp().globalData.goodsDetails = that.element;
				}else{
					that.element.push(network_id);
					getApp().globalData.goodsDetails = that.element;
				}
			},
			loadDate: function() {
				this.tui.request('user/networkList',{
					
				}).then((res) => {
					console.log(res);
					// if(res.data.list.length > 0){
						this.goodsDetails = res.data.list
					// }
				}).catch((err) => {
					let params = {
						title: "服务器异常",
						imgUrl: "/static/toast/fail-circle.png",
						icon: true
					};
					this.$refs.toast.show(params);
				})
			},
			details: function(url, type) {
				if (!url) {
					return false
				}
				if (type == 1) {
					uni.switchTab({
						url: url
					});
					return false
				}
				uni.navigateTo({
					url: url,
				});
			},
			add:function(){
				if(this.spare.length > 10){
					let params = {
						title: "超出最大限制",
						imgUrl: "/static/toast/info-circle.png",
						icon: true
					};
					this.$refs.toast.show(params)
					return false
				}
				// let params = {
				// 	title: "添加成功",
				// 	imgUrl: "/static/toast/check-circle.png",
				// 	icon: true
				// };
				// this.$refs.toast.show(params)
				this.spare.push({name : '',type:'not_must',status: 1,field: 0,val:'',extracting:0})
			
			},
			del:function(key){
				// let params = {
				// 	title: "删除成功",
				// 	imgUrl: "/static/toast/check-circle.png",
				// 	icon: true
				// };
				// this.$refs.toast.show(params)
				this.spare.splice(key,1)
			},
			closeActionSheet: function() {
				this.showActionSheet = false
			},
			openActionSheet: function(type,index) {
				console.log(this.item);
				let maskClosable = true;
				let tips = "";
				let color = "#9a9a9a";
				let size = 26;
				let isCancel = true;
				setTimeout(() => {
					this.spareIndex  = index >= 0?index:'';
					this.showActionSheet = true;
					this.type = type;
					this.item = this.itemList[type];
					this.maskClosable = maskClosable;
					this.tips = tips;
					this.color = color;
					this.size = size;
					this.isCancel = isCancel
				}, 0)
			},
			itemClick: function(e) {
				let index = e.index;
				if(this.type == 0){
					this.shipping_type = index
					this.typename = this.itemList[this.type][this.shipping_type]['text'];
					this.list = this.receipt[this.shipping_type]
				}else if(this.type == 1){
					let status = this.itemList[this.type][index]['type'];
					this.spare[this.spareIndex]['type'] = status					
				}
				// console.log('这是什么的',this.shipping_type)
				this.closeActionSheet();
			},
			detail: function() {
				let len = this.spare.length
				let status = 0
				if(len > 0){
					for(let i = 0; i < len ;i++){
						if(!this.spare[i]['name']){
							status = 1 
							break
						}
					}
					if(status == 1){
						let params = {
							title: "请填写字段名称",
							imgUrl: "/static/toast/fail-circle.png",
							icon: true
						};
						this.$refs.toast.show(params)
						return false;
					}
				}
				
				
				if(this.shipping_type == 1){
					let extractingStatus = 0;
					let extractingMsg = '';
					console.log(this.list.length);
					var shipping_network = [];
					var listst = [];
					var type_steay = 0;
					var type_steay_ts = 0;
					console.log(this.list.length);
					for(let i = 0; i < this.list.length; i++){
						// console.log('这是什么的',this.list[i]['extracting'],this.list[i]['val'])
						// if(this.list[i]['extracting'] == 1 && this.list[i]['val'] == '' ){
						// 	extractingStatus = 1;
						// 	extractingMsg = this.list[i]['name'];
						// 	break
						// }
						// if(i > 4){
						// 	listst[type_steay_ts] = this.list[i];
						// 	type_steay_ts = type_steay_ts + 1;
						// }else{
						// 	shipping_network[type_steay] = this.list[i];
						// 	type_steay = type_steay + 1;
						// }
						
						listst[0] = this.list[0];
						type_steay_ts = type_steay_ts + 1;
						
					}
					console.log(listst);
					if(extractingStatus == 1){
						let params = {
							title: "请填写" + extractingMsg,
							imgUrl: "/static/toast/fail-circle.png",
							icon: true
						};
						this.$refs.toast.show(params)
						return false;
					}
					console.log(this.element);
					if(this.element.length <= 0 || !this.element){
						let params = {
							title: "请选着自提点",
							imgUrl: "/static/toast/fail-circle.png",
							icon: true
						};
						this.$refs.toast.show(params)
						return false;
					}
					// console.log(listst);
					// console.log(shipping_network);
					// return false;
					let pages = getCurrentPages();  //获取所有页面栈实例列表
					let prevPage = pages[ pages.length - 2 ];  //上一页页面实例
					prevPage.$vm.shipping_param = {spare:[]};
					// prevPage.$vm.shipping_param = {shipping_type: this.shipping_type,list:listst,spare:this.spare,typename:this.typename,shipping_network:shipping_network};
					prevPage.$vm.shipping_param = {shipping_type: this.shipping_type,list:listst,spare:this.spare,typename:this.typename};
					for(let i = 0; i < this.spare.length; i++){
						this.spare[i]['key'] = 'ext'+i;
					}
					console.log('这是物流的',this.spare,this.list,prevPage.$vm.shipping_param)
				}else{
					
					let pages = getCurrentPages();  //获取所有页面栈实例列表
					let prevPage = pages[ pages.length - 2 ];  //上一页页面实例
					prevPage.$vm.shipping_param = {spare:[]};
					prevPage.$vm.shipping_param = {shipping_type: this.shipping_type,list:this.list,spare:this.spare,typename:this.typename};
					for(let i = 0; i < this.spare.length; i++){
						this.spare[i]['key'] = 'ext'+i;
					}
					console.log('这是物流的',this.spare,this.list,prevPage.$vm.shipping_param)
				}
				
				
				
				// let pages = getCurrentPages();  //获取所有页面栈实例列表
				// let prevPage = pages[ pages.length - 2 ];  //上一页页面实例
				// prevPage.$vm.shipping_param = {spare:[]};
				// prevPage.$vm.shipping_param = {shipping_type: this.shipping_type,list:this.list,spare:this.spare,typename:this.typename,shipping_network:shipping_network};
				// console.log('这是物流的',this.spare,this.list,prevPage.$vm.shipping_param)
				
				uni.navigateBack({  //uni.navigateTo跳转的返回，默认1为返回上一级
					delta: 1
				});
			}
		},
	}
</script>

<style>
	/* 自提点 */
	.bottom_ztd{
		width: 200rpx;
		float: right;
		margin-bottom: 0rpx !important;
		font-size: 26rpx;
		height: 50rpx;
		line-height: 50rpx;
	}
	.top_ztd{
		padding: 20rpx;
		height: 75rpx;
	}
	/* 自提点 */
	
	.tui-input{
		/* z-index: -1; */
	}
	
	.container {
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-list-view-top {
		padding-top: 20upx !important
	}
	.tui-list-view-top  .tui-list-cell-name{
		padding-left: 0rpx;
		font-size: 30rpx;
		font-weight: 400;
		color: #8f8f8f !important;
	}
	.tui-list-title {
		font-size: 30rpx;
		font-weight: 450;
		color: #000000 !important; 
	}
	
	.tui-list-view-top .tui-right {
		margin-left: auto;
		margin-right: 34upx;
		font-size: 30rpx;
		line-height: 1;
		color: #000;
	}
	.tui-list-add .tui-right{
		color: #0A8FE2 !important;
	}
	.tui-list-cell-name-extracting{
		min-width: 135rpx !important; 
	}
	.tui-list-cell-name {
		/* padding-left: 20upx; */
		vertical-align: middle;
		line-height: 30upx;
	}

	.tui-list::after {
		left: 94upx !important
	}

	.tui-right {
		margin-left: auto;
		margin-right: 34upx;
		font-size: 30rpx;
		line-height: 1;
		color: #999;
	}



	.tui-msg-right {
		max-width: 120upx;
		height: 88upx;
		margin-left: auto;
		text-align: right;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}

	.tui-msg-right.tui-right-dot {
		height: 76upx;
		padding-bottom: 10upx;

	}

	.tui-msg-time {
		width: 100%;
		font-size: 24upx;
		line-height: 24upx;
		color: #9397a4;
	}

	.tui-msg::after {
		left: 154upx !important
	}
	.footMar{
		margin-top: 10rpx;
		/* padding-bottom: 280rpx; */
	}
	.footMar .tui-list-cell{
		background: #f5f6f8 !important;
	}
	.tui-list-cell-name{
		font-size: 30rpx;
		font-weight: 400;
	}
	
	.footMar .tui-list-cell::after{
		border-bottom: none
	}
	.tui-btn-box {
		width: 100%;	
		padding: 40rpx 50rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		padding-bottom: 50px;
		box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
		position: fixed;
		display: flex;
		z-index: 10;
		bottom: 0;
		left: 0;
		padding-bottom: env(safe-area-inset-bottom);
	}
	.btn-primary {
		background: #1193e3 !important;
		border-radius: 20rpx !important;
		margin-bottom: 30px;
	}
	
	.tui-light-green{
		background-color: #FFF !important;
	}
	
	/* 自提点信息 */
	.menuImgPadding{
		width: 40rpx;
		height: 40rpx;
		background: #FFFFFF;
		border-radius: 50%;
		/* padding: 15rpx; */
		/* margin-top: 44.5rpx; */
	}
	.menuImg{
		width: 100%;
		height: 100%;
	}
	.tui-btn-box {
		width: 100%;	
		padding: 40rpx 50rpx;
		box-sizing: border-box;
		/* background: #FFFFFF; */
		padding-bottom: 50px;
		/* box-shadow: 0px 0px 15px rgba(0,0,0,0.1); */
		position: fixed;
		display: flex;
		z-index: 10;
		bottom: 0;
		left: 0;
		padding-bottom: env(safe-area-inset-bottom);
	}
	.btn-primary {
		background: #1193e3 !important;
		border-radius: 20rpx !important;
		margin-bottom: 30px;
	}
	/* tuiTips */
	.tuiTips{
		margin-top: 30% ;
	}
	.tui-tips-content{
		font-size: 30rpx !important; 
		color: #cccccc !important;
	}
	/* tuiTips */
	
	/* 滑动事件 */
	.container {
		padding-bottom: 200rpx;
	}
	
	.header {
		padding: 80rpx 90rpx 60rpx 90rpx;
		box-sizing: border-box;
	}
	
	.title {
		font-size: 34rpx;
		color: #333;
		font-weight: 500;
	}
	
	.sub-title {
		font-size: 24rpx;
		color: #7a7a7a;
		padding-top: 18rpx;
	}
	
	.tui-list-item {
		padding: 40rpx 30rpx;
		display: flex;
		align-items: item;
	}
	
	.tui-title {
		width: 100%;
		padding: 50rpx 30rpx 30rpx;
		box-sizing: border-box;
		font-size: 32rpx;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.tui-switch {
		transform: scale(0.8);
		transform-origin: 100% center;
	}
	
	.tui-custom-btn_box {
		width: 140px;
		height: 100%;
		padding: 0 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fafafa;
	}
	
	.tui-custom-btn {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background-color: #fff;
		color: #333;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
	}
	
	.tui-custom-mr {
		margin-right: 20rpx;
	}
	/* 滑动事件 */
	
	.list_networkList{
		width: 100%;
		border-bottom: 1rpx solid #CFCFCF;
		height: 280rpx;
		background: #FFF;
	}
	.list_left{
		width: 15%;
		line-height: 105rpx;
		text-align: center;
		float: left;
	}
	.list_details{
		width: 70%;
		float: left;
		height: 235rpx;
		font-size: 25rpx;
	}
	.list_right{
		width: 10%;
		float: left;
		height: 280rpx;
		line-height: 280rpx;
	}
	.list_tops{
		height: 60rpx;
		line-height: 60rpx;
		margin-top: 24rpx;
	}
	.list_bottom{
		height: 60rpx;
		line-height: 60rpx;
		font-size: 30rpx;
		color: #666;
	}
	.name_networkList{
		float: left;
		width: 235rpx;
		font-size: 28rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		line-clamp: 1;
		-webkit-box-orient: vertical;
		font-size: 36rpx;
		font-weight: 500;

	}
	.phone_networkList{
		float: left;
		width: 210rpx;
		font-size: 28rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		line-clamp: 1;
		-webkit-box-orient: vertical;
	}
	.title_networkList{
		float: left;
		width: 125rpx;
		/* text-align: center; */
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		line-clamp: 1;
		-webkit-box-orient: vertical;
	}
	.address_networkList{
		float: left;
		width: 400rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		line-clamp: 1;
		-webkit-box-orient: vertical;
	}
</style>
